<script setup>
import { ref } from 'vue';
import { ElLoading } from 'element-plus'
const loading = ref(true);
const text = ref(``)//获取到上面文本内输入的信息
const result = ref(``)//获取到的翻译结果
import { translationText } from "@/api/utils/chat";
// 计算属性，计算剩余的字数
const maxlength = ref(500)//输入框最大字数
const remainingChars = computed(() => {
    return maxlength.value - text.value.length;
});
function textTranslation() {
    result.value = ``
    const loading = ElLoading.service({
        lock: true,
        text: '正在加载，请勿刷新页面...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    translationText(text.value).then(response => {
        result.value = response
        // 关闭加载框
        loading.close()
    })
}
// 当文本框内容变化时，更新剩余字数
const updateCharCount = () => { };





//按钮内的内容
const first = ref('中文(简体)')
const second = ref('英语')

const showLbox = ref(false)
//语种类型
const frequentlyLanguage = ref(
    [
        { value: 'cn', text: '中文（简体）' },
        { value: 'en', text: '英语' },
        { value: 'ja', text: '日语' },
        { value: 'ko', text: '韩语' },
        { value: 'ru', text: '俄语' },
        { value: 'fr', text: '法语' },
        { value: 'es', text: '西班牙语' },
        { value: 'ar', text: '阿拉伯语' },
        { value: 'pt', text: '葡萄牙语' }
    ]
)
const otherLanguages = ref([
    { value: 'ar', text: '阿拉伯语' },
    { value: 'am', text: '阿姆哈拉语' },
    { value: 'az', text: '阿塞拜疆语' },
    { value: 'nb', text: '博克马尔挪威语' },
    { value: 'bg', text: '保加利亚语' },
    { value: 'is', text: '冰岛语' },
    { value: 'pl', text: '波兰语' },
    { value: 'fa', text: '波斯语' },
    { value: 'da', text: '丹麦语' },
    { value: 'de', text: '德语' },
    { value: 'ru', text: '俄语' },
    { value: 'fr', text: '法语' },
    { value: 'fi', text: '芬兰语' },


    { value: 'yue', text: '广东话' },
    { value: 'km', text: '高棉语' },
    { value: 'ka', text: '格鲁吉亚语' },
    { value: 'kka', text: '哈萨克语' },
    { value: 'ko', text: '韩语' },
    { value: 'ha', text: '豪萨语' },
    { value: 'nl', text: '荷兰语' },
    { value: 'ca', text: '加泰罗尼亚语' },
    { value: 'cs', text: '捷克语' },
    { value: 'hr', text: '克罗地亚语' },
    { value: 'lv', text: '拉脱维亚语' },
    { value: 'lo', text: '老挝语' },
    { value: 'lt', text: '立陶宛语' },
    { value: 'ro', text: '罗马尼亚语' },

    { value: 'mr', text: '马拉地语' },
    { value: 'ml', text: '马拉雅拉姆语' },
    { value: 'ms', text: '马来语' },
    { value: 'mn', text: '内蒙语' },
    { value: 'bn', text: '孟加拉语' },
    { value: 'my', text: '缅甸语' },
    { value: 'af', text: '南非荷兰语' },
    { value: 'zu', text: '南非祖鲁语' },
    { value: 'ne', text: '尼泊尔语' },
    { value: 'pt', text: '葡萄牙语' },
    { value: 'ps', text: '普什图语' },
    { value: 'ja', text: '日语' },
    { value: 'sv', text: '瑞典语' },


    { value: 'sr', text: '塞尔维亚语' },
    { value: 'si', text: '僧伽罗语' },
    { value: 'sk', text: '斯洛伐克语' },
    { value: 'sl', text: '斯洛文尼亚语' },
    { value: 'sw', text: '斯瓦希里语' },
    { value: 'tl', text: '塔加路语（菲律宾）' },
    { value: 'tr', text: '土耳其语' },
    { value: 'tg', text: '塔吉克语' },
    { value: 'te', text: '泰卢固语' },
    { value: 'ta', text: '泰米尔语' },
    { value: 'th', text: '泰语' },
    { value: 'tk', text: '土库曼语' },
    { value: 'nm', text: '外蒙语' },
    { value: 'ur', text: '乌尔都语' },
    { value: 'uk', text: '乌克兰语' },
    { value: 'uz', text: '乌兹别克语' },


    { value: 'su', text: '巽他语' },
    { value: 'es', text: '西班牙语' },
    { value: 'he', text: '希伯来语' },
    { value: 'el', text: '希腊语' },
    { value: 'hu', text: '匈牙利语' },
    { value: 'hy', text: '亚美尼亚语' },
    { value: 'ii', text: '彝语' },
    { value: 'it', text: '意大利语' },
    { value: 'hi', text: '印地语' },
    { value: 'id', text: '印尼语' },
    { value: 'en', text: '英语', selected: true },
    { value: 'vi', text: '越南语' },
    { value: 'cn', text: '中文（简体）' },
    { value: 'jv', text: '爪哇语' }
])

//语种选择获取
function handleClick(lang) {

    showLbox.value = false
    // 处理点击事件，获取lang对象的value和text属性
    console.log("Clicked:", lang.value, lang.text);
    // 在这里可以进一步处理你的逻辑，例如将选中的语种设为当前选中状态等
}

const iconRotation = ref(0)
//按钮点击出现选择
function toggleLbox(source) {
    // 根据点击的按钮不同，决定是否显示 Lbox
    if (source === 'first' || source === 'second') {
        showLbox.value = true
        iconRotation.value += 90
    }
}




</script>

<template>
    <el-row>
        <el-col :span="24">
            <el-card style="margin: 15px;height: 85vh;position: relative">
                <!-- 语言选择 -->
                <el-row style="">
                    <el-col :span="24" style="position: absolute;right: 40px;">
                        <div class="container">
                            <div class="service-item-demo service-item-test self-trans">
                                <div class="service-item-content">
                                    <div class="trans-operation">
                                        <el-button style="width: 200px;" plain @click="toggleLbox('first')">
                                            {{ first }}
                                            <el-icon class="el-icon--right"
                                                :style="{ transform: 'rotate(' + iconRotation + 'deg)' }">
                                                <CaretLeft />
                                            </el-icon>
                                        </el-button>
                                        <span class="form-to-icon" style="font-size: 18px;padding:20px 15px 0;">
                                            <el-icon style="margin-top: 15px;">
                                                <Sort style="transform:rotateZ(90deg);" />
                                            </el-icon>
                                        </span>
                                        <el-button style="width: 200px;" plain @click="toggleLbox('second')">
                                            {{ second }}
                                            <el-icon class="el-icon--right"
                                                :style="{ transform: 'rotate(' + iconRotation + 'deg)' }">
                                                <CaretLeft />
                                            </el-icon>
                                        </el-button>
                                    </div>
                                    <!-- 所有语言选中 -->
                                    <div class="Lbox" v-show="showLbox">
                                        <div class="Lbox-content">
                                            <div class="Lbox-frequently-used">
                                                <span>常用语种</span>
                                                <!-- <table> -->
                                                <ul style="margin-top: -34px;margin-left: 25px;">
                                                    <li style="margin-left: 50px;" v-for="lang in frequentlyLanguage"
                                                        :key="lang.value" @click="handleClick(lang)">
                                                        <div>{{ lang.text }}</div>
                                                    </li>
                                                </ul>
                                                <!-- </table> -->
                                            </div>
                                            <div class="Lbox-table" style="width: 968px;">
                                                <!-- <table> -->
                                                <ul>
                                                    <li v-for="lang in otherLanguages" :key="lang.value"
                                                        @click="handleClick(lang)">
                                                        <div>{{ lang.text }}</div>
                                                    </li>
                                                </ul>
                                                <!-- </table> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <!-- 主体内容 -->
                <el-row>
                    <el-col :span="24">
                        <div class="ai-module-demo-container" style="margin-top: 20px;">
                            <div class="tech-recognition" images="" videos="">
                                <div class="ai-container">
                                    <div class="corrector">
                                        <div class="mid-down-title">
                                            <span class="down-title-des">请输入一段想翻译的文本：</span>
                                            <!-- <span class="com-click">随机示例</span> -->
                                        </div>
                                        <div class="mid-input">
                                            <div class="glass-model">
                                                <div class="mid-form-cover">
                                                    <div class="com-txt">
                                                        <textarea v-model="text" spellcheck="false"
                                                            :maxlength="maxlength" placeholder="请输入翻译文本"
                                                            class="com-txt-area" @input="updateCharCount"></textarea>
                                                    </div>
                                                    <div class="ed-form-down">
                                                        <span class="ed-down-tips">
                                                            还可以输入<span class="ed-tips-in">{{ remainingChars }}</span>个字
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="msg-tip" style="display: none;">文本解析中...</div>
                                            <div class="msg-tip" style="display: none;">
                                                很抱歉，文本中可能存在敏感内容,请<span class="retry">重新输入</span>。
                                            </div>
                                        </div>
                                        <div class="mid-btn">
                                            <el-button class="mid-btn-span">
                                                开始翻译
                                            </el-button>
                                        </div>
                                        <div class="demo-result">
                                            <div class="demo-result-title">翻译结果</div>
                                            <div class="demo-result-body">
                                                {{ result }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
</template>



<style scoped>
.Lbox {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    position: absolute;
    z-index: 99;
    top: 55px;
    right: -5px;
    width: 900px;
    /* display: none; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.Lbox-table ul {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.Lbox-content {
    font-family: "\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, "\5B8B\4F53";
    list-style: none;
    margin-top: 9px;
    border: 1px solid #e9e9e9;
    box-sizing: border-box;
    background-color: #fff;
}

.Lbox-frequently-used {
    list-style: none;
    height: 36px;
    line-height: 34px;
    width: 100%;
    font-size: 0;
    background-color: #faf9f8;
    border-bottom: 1px solid #e9e9e9;
}

.service-item-test.self-trans .service-item-content .Lbox .Lbox-content .Lbox-frequently-used span {
    margin-left: 20px;
    font-size: 14px;
    font-weight: bold;
}

.frequently-used-language {
    line-height: 34px;
    font-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}

.service-item-test .service-item-content .Lbox .Lbox-content li {
    height: 22px;
    line-height: 22px;
    color: #666;
    cursor: pointer;
}

.service-item-test.self-trans .service-item-content .Lbox .Lbox-content .Lbox-frequently-used ul li {
    display: inline-block;
    margin-left: 32px;
    font-size: 12px;
    cursor: pointer;
}

.service-item-test.self-trans .service-item-content .Lbox .Lbox-content .Lbox-frequently-used ul li:hover {
    color: #3d9cff;
}

.service-item-test.self-trans .service-item-content .Lbox .Lbox-table {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: flex-start;
    font-size: 12px;
}

.service-item-test.self-trans .service-item-content .Lbox .Lbox-table ul {
    width: 100%;
    margin-left: -40px;
}

.service-item-test.self-trans .service-item-content .Lbox .Lbox-table ul li {
    width: 110px;
    /* text-align: right; */
    height: 22px;
    line-height: 22px;
    color: #666;
    cursor: pointer;
    /* border-left: 1px solid #e9e9e9; */
    display: flex;
    justify-content: space-around;
}

.service-item-test.self-trans .service-item-content .Lbox .Lbox-table ul li:hover {
    color: #3d9cff;
    /* background-color: #c4c4c4d5; */
}

.service-item-test.self-trans .service-item-content .Lbox .Lbox-table ul li:nth-child(2n) {
    background-color: rgb(243, 248, 252);
}





.ai-module-demo-container {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* margin-top: 40px; */
}

.tech-recognition {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.ai-container {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.corrector {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    width: 1180px;
    margin: 0 auto;
    font-family: Microsoft YaHei;
}

.mid-down-title {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    margin-bottom: 20px;
}

.down-title-des {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    font-size: 18px;
    color: #000;
}

.com-click {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 2px;
    color: #3d9cff;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #3d9cff;
}

.mid-input {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
}

.glass-model {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    height: 100%;
}

.mid-form-cover {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
    background-color: #fff;
}

.com-txt {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
    z-index: 2;
    display: block;
    width: 1180px;
    height: 200px;
    padding: 30px 0 64px 30px;
    background-color: transparent;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.com-txt-area {
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 24px;
    width: 1128px;
    height: 100%;
    color: #666;
    border: none;
    outline: 0;
    resize: none;
    padding: 0 20px 0 0;
}

.ed-form-down {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 30px;
    bottom: 20px;
    height: 24px;
}

.ed-down-tips {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    font-size: 14px;
    color: #999;
}

.ed-tips-in {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    font-size: 14px;
    margin: 0 2px;
    color: #ff851a;
}

.msg-tip {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 32px;
    width: fit-content;
    height: 36px;
    line-height: 36px;
    color: #666;
    background: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .15);
    border-radius: 4px;
    display: none;
}

.retry {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    line-height: 36px;
    color: #1a73e8;
    cursor: pointer;
}

.mid-btn {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    padding: 30px 0;
    text-align: center;
}

.mid-btn-span {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    text-align: center;
    color: #036de2;
    border: 1px solid #036fe2;
    cursor: pointer;
    display: inline-block;
    margin: 0 auto;
    box-sizing: border-box;
    width: 180px;
    height: 54px;
    /* line-height: 54px; */
    font-size: 18px;
}

.demo-result {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
    height: 200px;
    box-sizing: border-box;
    border: 1px solid #eee;
    padding: 56px 26px 42px 30px;
}

.demo-result-title {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 30px;
    top: 20px;
    color: #000;
    font-weight: 700;
}

.demo-result-body {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    color: #666;
    line-height: 24px;
}


.el-tooltip demo-result-highlight {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    line-height: 24px;
    background: #036fe2;
    color: #fff;
}

.demo-result-tips {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 30px;
    bottom: 20px;
    color: #999;
}

.ed-tips-in {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    margin: 0 2px;
    color: #ff851a;
}
</style>
